<script setup>
import { ref } from 'vue'
const coslude = ref([
    {id:1,name:'推荐',path:'/shouye/tuijian'},
    {id:2,name:'美食',path:'/shouye/meishi'},
    {id:3,name:'穿搭',path:'/shouye/chuanda'},
    {id:4,name:'风景',path:'/shouye/fengjin'},
    {id:5,name:'直播'},
    {id:6,name:'音乐'},
    {id:7,name:'游戏'},
    {id:8,name:'科技'},
    {id:9,name:'数码'},
])
const cosludes = ref(0);

</script>


<template>
<div class="main-container">
    <div class="main-content">
        <ul>
            <li v-for="(item,i) in coslude" 
            :key="item.id" 
            :class="cosludes==i?'selected':''" 
            @click="cosludes=i"
            >
            <RouterLink :to="item.path">{{item.name}}</RouterLink>
        </li>
        </ul>
        <div>
            <RouterView></RouterView>
        </div>
    </div>
</div>
</template>

<style scoped>

</style>